Añadir iconos de suscripción RSS y E-Mail

Hace tiempo veíamos la forma de añadir iconos de redes sociales en nuestra sidebar, y ayer mismo Espartana86 Diva Ecologista me sugería la posibilidad de explicar la forma añadir un icono RSS y otro con el típico sobrecito para la suscripción vía EMail. Su idea es añadir sus propios iconos cosa que podrá hacer sustituyendo simplemente la url de las imágenes del ejemplo por las suyas.

SUSCRIBIRSE VIA RSS SUSCRIBIRSE VIA E-MAIL

Los iconos del ejemplo podemos añadirlos en nuestra sidebar en un gadget de HTML,  en su interior añadimos los estilos y las imágenes que harán de enlace para hacer posible la suscripción.

<div id="suscribirse">

<div class="suscribirse2">

<h2 class="suscripcion rss">

<a href="http://feeds.feedburner.com/GemaBlog">SUSCRIBIRSE VIA RSS</a></h2>

<h2 class="suscripcion email">

<a href="http://feedburner.google.com/fb/a/mailverify?uri=GemaBlog">SUSCRIBIRSE VIA E-MAIL</a></h2>

</div> </div>

<style type='text/css'>

#suscribirse .suscribirse2 h2.suscripcion { border:0; margin:0; padding:6px 0 0 55px; height:42px; font-size:11px;font-family:&quot;Segoe UI&quot;,Calibri,&quot;Myriad Pro&quot;,Myriad,&quot;Trebuchet MS&quot;,Helvetica,Arial,sans-serif; font-weight:bold; }

#suscribirse .suscribirse2 h2.rss { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Bx8ZOTlM90v-TPxa0PbNUM7lfOWUM2foC6FhjO_7r3pTZGinxyyT6QfRdMZbfxy6DBdcSsA9y1Y9lhmLdfIJw-l4lQPnIJ52z0NsdIyT0srkLBxbE1VxaaLlhOo5JFfukZK7/s0/ico-rss.png) no-repeat top left; }

#suscribirse .suscribirse2 h2.email { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs974xcwrFZ-wooovQgygzhlgy6Tnk_QGwgBNI9ommZbR0eUvUeXMrKqw0Hu0SyH2ZtWsN9WsqeVU09AlW3_xRCv0LVjpTb0vgAcbr3Agk6oe8snAByaCGAIKUrKtday1e0s95/s0/ico-mail.png) no-repeat top left; }

#suscribirse .suscribirse2 .suscripcion a { color:#000; text-decoration:none; }

</style>

En color verde es donde debemos sustituir GemaBlog por vuestro nombre en Feeburner.

En color azul las imágenes, todos sabemos que es conveniente descargarlas y alojarlas en nuestro blog o álbum de Picasa.

Una vez lo tenemos añadido si queremos podemos añadirle un borde para destacar el gadget, eso lo podemos hacer añadiendo un nuevo id justo antes de la primera línea, sería algo así:

<div id="borde-suscribirse">
<div id="suscribirse">
<div class="suscribirse2">
<h2 class="suscripcion rss">

aquí va el código anterior...

</div></div></div>

Los estilos del borde los añadimos con la siguiente línea:

<style type='text/css'>

estilos anteriores...

#borde-suscribirse { border: 1px solid #C0C0C0; padding:10px;  }
</style>

Nos resultaría algo así:

SUSCRIBIRSE VIA RSS SUSCRIBIRSE VIA E-MAIL